<template>
  <el-form :model="detailForm" ref="detailForm" label-width="155px" :rules="rules">
    <el-card class="box-card">
      <div slot="header" class="header-card">
        <span class="header-card-title">指标申请反馈</span>
      </div>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="限牌城市:" prop="cityName">
            <city-select v-model="citySelection" placeholder="选择限牌城市" ref="citySelect" :showAllLevels="false"
                         @change="citySelectionChange" v-if="isEdit"></city-select>
            <span v-else>{{ detailForm.cityName }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="指标类型燃油:" prop="indicatorType">
            <el-select v-model="detailForm.indicatorType" multiple placeholder="选择指标类型" style="width: 100%"
                       @change="indicatorTypeChange">
              <el-option label="新能源" value="新能源"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="燃油指标数量:" prop="fuelNum">
            <el-input v-if="isEdit" placeholder="输入燃油指标数量" v-model="detailForm.fuelNum"></el-input>
            <span v-else>{{ detailForm.fuelNum }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="燃油指标申请方式:" prop="fuelMethod">
            <el-select v-model="detailForm.fuelMethod" placeholder="选择燃油指标申请方式" v-if="isEdit" style="width: 100%">
              <el-option label="竞价" value="竞价"></el-option>
              <el-option label="摇号" value="摇号"></el-option>
            </el-select>
            <span v-else>{{ detailForm.fuelMethod }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="指标类型燃油:" prop="indicatorType">
            <el-select v-model="detailForm.indicatorType" multiple placeholder="选择指标类型" style="width: 100%"
                       @change="indicatorTypeChange">
              <el-option label="新能源" value="新能源"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="新能源指标数量:" prop="newEnergyNum">
            <el-input v-if="isEdit" placeholder="输入新能源指标数量" v-model="detailForm.newEnergyNum"></el-input>
            <span v-else>{{ detailForm.newEnergyNum }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="新能源指标申请方式:" prop="newEnergyMethod">
            <el-select v-model="detailForm.newEnergyMethod" placeholder="选择新能源指标申请方式" v-if="isEdit" style="width: 100%">
              <el-option label="竞价" value="竞价"></el-option>
              <el-option label="摇号" value="摇号"></el-option>
            </el-select>
            <span v-else>{{ detailForm.newEnergyMethod }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="申请保证金合计金额:" prop="newEnergyEarnestMoney">
            <el-input v-if="isEdit" placeholder="输入申请保证金合计金额" v-model="detailForm.newEnergyEarnestMoney"></el-input>
            <span v-else>{{detailForm.newEnergyEarnestMoney}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="竞拍合计金额:" prop="newEnergyAuctionMoney">
            <el-input v-if="isEdit" placeholder="输入竞拍合计金额" v-model="detailForm.newEnergyAuctionMoney"></el-input>
            <span v-else>{{ detailForm.newEnergyAuctionMoney}}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col>
          <el-form-item label="申请原因:" prop="reason">
            <el-input v-if="isEdit" placeholder="输入申请原因" type="textarea" :rows="4"
                      v-model="detailForm.reason"></el-input>
            <pre v-else>{{ detailForm.reason }}</pre>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col>
          <el-form-item label="指标凭证:" prop="indexVoucher">
            <image-common v-model="detailForm.indexVoucher" :disabled="!isEdit" :limit="20" :upType="2"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>
  </el-form>
</template>

<script>
import CitySelect from "@/views/components/citySelect.vue";
export default {
  mame:'indexAudit',
  components: { CitySelect },
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: "write",
    },
  },
  computed: {
    detailForm: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", { ...target, [key]: value });
            return true;
          },
        });
        return proxy;
      },
    },
    isEdit() {
      return function () {
        let a;
        switch (this.state) {
          case "write":
            a = true;
            break;
          case "disabled":
            a = true;
            break;
          case "readonly":
            a = false;
            break;
          default:
            a = false;
        }
        return a;
      };
    },
  },
  watch: {},
  data() {
    return {
      citySelection: [],
      isNewEnergy: false,
      isFuel: false,
      rules: {
        applyTime: [
          { required: true, message: "请选择申请时间", trigger: "change" },
        ],
        cityName: [
          { required: true, message: "请输入申请城市", trigger: "blur" },
        ],
        indicatorType: [
          { required: true, message: "请选择指标类型", trigger: "change" },
        ],
        fuelNum: [
          { required: true, message: "请输入燃油指标数量", trigger: "blur" },
        ],
        newEnergyNum: [
          { required: true, message: "请输入新能源指标数量", trigger: "blur" },
        ],
        newEnergyEarnestMoney: [
          {
            required: true,
            message: "请输入申请保证金合计金额",
            trigger: "blur",
          },
        ],
        newEnergyAuctionMoney: [
          { required: true, message: "请输入竞拍合计金额", trigger: "blur" },
        ],
        fuelMethod: [
          {
            required: true,
            message: "请选择燃油指标申请方式",
            trigger: "change",
          },
        ],
        newEnergyMethod: [
          {
            required: true,
            message: "请选择新能源指标申请方式",
            trigger: "change",
          },
        ],

        // indexVoucher: [
        //   { required: true, message: '请选择指标凭证', trigger: 'change' }
        // ],
        reason: [
          { required: true, message: "请输入申请原因", trigger: "blur" },
        ],
      },
      isShow: true,
      isForm: true,
    };
  },
  created() {},

  mounted() {},

  methods: {
    citySelectionChange(val) {
      if (val.length > 0) {
        const nodes = Array.from(val, (item) => ({
          value: item.value,
          label: item.label,
          pv: item.parent.value,
          pl: item.parent.label,
        }));
        this.detailForm.cityName = nodes[0].label;
        this.detailForm.cityId = nodes[0].value;

        this.citySelection = [nodes[0].pv, nodes[0].value];
      } else {
        this.citySelection = val;

        this.detailForm.cityName = "";
        this.detailForm.cityId = "";
      }
    },

    indicatorTypeChange(val) {
      console.log(val);
      if (val.length > 0) {
        if (val.includes("燃油") && val.includes("新能源")) {
          this.isFuel = true;
          this.isNewEnergy = true;
        }
        if (val.includes("燃油") && !val.includes("新能源")) {
          this.isFuel = true;
          this.isNewEnergy = false;
        }
        if (!val.includes("燃油") && val.includes("新能源")) {
          this.isFuel = false;
          this.isNewEnergy = true;
        }
      } else {
        this.isFuel = false;
        this.isNewEnergy = false;
      }
    },

    handleEffect() {
      return new Promise((resolve, reject) => {
        this.$refs.detailForm.validate((valid) => {
          if (valid) {
            resolve();
          } else {
            reject();
          }
        });
      });
    },

    valid() {
      return new Promise((resolve, reject) => {
        this.$refs.detailForm.validate((valid) => {
          resolve(valid);
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box-card {
  font-size: 14px;
  margin-bottom: 16px;

  ::v-deep .el-card__header {
    padding: 0;
    height: 48px;
    margin: 0 14px;
    display: flex;
    align-items: center;

    .header-card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex: 1;

      .header-card-title {
        font-size: 16px;
        color: #333333;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
      }
    }
  }

  ::v-deep .el-card__body {
    padding: 10px 14px;
  }

  .box-card-inp {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .inp-name {
      width: 130px;
      text-align: right;
      font-size: 14px;
    }

    .inp-name-r {
      flex: 1;
    }
  }

  .top-card {
    display: flex;

    .top-card-right {
      flex: 1;
      font-size: 14px;
      line-height: 36px;
      margin-left: 20px;
    }
  }
}

::v-deep .el-form-item__label {
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #464646;
}
</style>



